<!DOCTYPE html>
<meta charset="utf-8">
<html>
<div id="chartContainer">
  {scriptDependencies}
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    d3.tsv("/data/example_data.tsv", function (data) {

    // Fill the SVG background
    svg.append("rect")
      .attr("x", "8px")
      .attr("y", "8px")
      .attr("width", "100%")
      .attr("height", "100%")
      .style("fill", "#2c3e50");

      // Configure a simple bar chart
      var myChart = new dimple.chart(svg, data),
          xAxis = myChart.addCategoryAxis("x", "Owner"),
          yAxis = myChart.addMeasureAxis("y", "Unit Sales"),
          mySeries = myChart.addSeries("Owner", dimple.plot.bar);

      // Draw without any axes
      xAxis.hidden = true;
      yAxis.hidden = true;

      // Set small margins as there is going to be no axes displayed
      myChart.setMargins(14, 18, 6, 10);

      // Define a custom color palette.  These colours are based on the excellent
      // set at http://flatuicolors.com/
      myChart.defaultColors = [
          new dimple.color("#3498db", "#2980b9", 1), // blue
          new dimple.color("#e74c3c", "#c0392b", 1), // red
          new dimple.color("#2ecc71", "#27ae60", 1), // green
          new dimple.color("#9b59b6", "#8e44ad", 1), // purple
          new dimple.color("#e67e22", "#d35400", 1), // orange
          new dimple.color("#f1c40f", "#f39c12", 1), // yellow
          new dimple.color("#1abc9c", "#16a085", 1), // turquoise
          new dimple.color("#95a5a6", "#7f8c8d", 1)  // gray
      ];

      // Set some custom display elements for each series shape
      mySeries.afterDraw = function (s, d) {

        // I've defined the width in terms of the golden ratio as it seems like the sort
        // of thing a designer would do.
        var shape = d3.select(s),
            goldenRatio = 1.61803398875;

        // Add a rectangle to the bar giving a nice style.  The idea was borrowed
        // from sirocco's question here:
        // http://stackoverflow.com/questions/25044608/dimplejs-barchart-styling-columns
        svg.append("rect")
          .attr("x", shape.attr("x"))
          .attr("y", shape.attr("y"))
          .attr("height", shape.attr("height"))
          .attr("width", (0.5 * shape.attr("width")) / goldenRatio)
          .style("fill", shape.style("stroke"))
          .style("opacity", 1)
          .style("pointer-events", "none");

        // Add some bar labels for the yValue
        svg.append("text")
          .attr("x", parseFloat(shape.attr("x")) + shape.attr("width") / 2)
          .attr("y", parseFloat(shape.attr("y")) + (shape.attr("height") > 30 ? (shape.attr("height") / 2 + 8) : - 10))
          .style("font-family", "courier new")
          .style("text-anchor", "middle")
          .style("font-size", "16px")
          .style("fill", "#ecf0f1")
          .style("pointer-events", "none")
          .text(yAxis._getFormat()(d.yValue));

        // Draw without a border
        shape.attr("stroke", shape.attr("fill"));

      };

      // Override the standard tooltip behaviour
      mySeries.addEventHandler("mouseover", function (e){

        // Draw the text information in the top left corner
        svg.selectAll(".dimple-hover-text")
          .data([e.xValue, d3.format(",.0f")(e.yValue)])
            .enter()
            .append("text")
            .attr("class", "dimple-hover-text")
            .attr("x", myChart._xPixels()  + myChart._widthPixels() - 25)
            .attr("y", function (d, i) { return myChart._yPixels() + 20 + i * 25; })
            .style("font-family", "courier new")
            .style("text-anchor", "end")
            .style("font-size", "20px")
            .style("fill", "#ecf0f1")
            .style("pointer-events", "none")
            .text(function (d) { return d; });

        // Put a coloured bar next to the text for no good reason
        svg.append("rect")
          .attr("class", "dimple-hover-text")
          .attr("x", myChart._xPixels() + myChart._widthPixels() - 15)
          .attr("y", myChart._yPixels())
          .attr("height", 60)
          .attr("width", 10)
          .style("fill", myChart.getColor(e.xValue).fill)
          .style("opacity", 1)
          .style("pointer-events", "none");

      });

      // Clear the text on exit
      mySeries.addEventHandler("mouseleave", function (e) {
        svg.selectAll(".dimple-hover-text").remove();
      });

      // Render everything
      myChart.draw();

    });

  </script>
</div>
</html>
